<template>
  <div class="userEst">
    <!-- <h5 class="userinfo-title">{{ spaceInfo.workspaceName }}</h5> -->
    <div class="userinfo">
      <div class="d-flex justify-content-between">
        <div class="userinfo-body d-flex">
          <img v-if="imageUrl" class="userinfo-avatar" :src="imageUrl">
          <div class="text-block">
            <p class="text">
              <span>{{ spaceInfo.workspaceName }}</span>
              <span class="line">|</span>
              <span>{{ spaceInfo.createBy }}</span>
              <span class="line">|</span>
              <span class="status"></span>
              <span v-if="spaceInfo.status==1">高</span>
              <span v-if="spaceInfo.status==2">中</span>
              <span v-if="spaceInfo.status==3">低</span>
            </p>
            <p class="text">{{ spaceInfo.description }}</p>
          </div>
        </div>
        <div class="right align-items-center d-flex pr-3">
          <button
            v-show="btnChe"
            class="btn btn-start btn-lg btn-outline-primary"
            @click="checkFlow"
          >
            <i class="iconfont iconicon_start"></i> 启动
          </button>
          <button
            v-show="!btnChe"
            class="btn btn-start btn-lg btn-outline-primary"
            @click="stopFlow"
          >中止</button>
          <button
            v-show="!btnChe"
            class="btn btn-start btn-lg btn-outline-primary"
            @click="finishFlow"
          >完成</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { view, updateSpace } from '@/api/frontPage/setting'
export default {
  name: 'UserInfo',
  data() {
    return {
      moren: require('@/assets/images/ast1.png'),
      imageUrl1: '',
      btnChe: true,
      spaceInfo: {},
      status: ''
    }
  },
  computed: {
    ...mapGetters(['workspaceId', 'imageUrl'])
  },
  created() {
    this.querySpaceInfo()
  },
  methods: {
    finishFlow() {
      this.spaceInfo.flowStatus = '3'
      this.status = '已完成'
      this.btnChe = true
      this.queryParentInfo()
    },
    stopFlow() {
      this.spaceInfo.flowStatus = '4'
      this.status = '已中止'
      this.btnChe = true
      this.queryParentInfo()
    },
    checkFlow() {
      this.spaceInfo.flowStatus = '2'
      this.status = '进行中'
      this.btnChe = false
      this.queryParentInfo()
    },
    queryParentInfo() {
      updateSpace(this.spaceInfo).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: this.spaceInfo.workspaceName + this.status
          })
        }
      })
    },
    querySpaceInfo() {
      view(this.workspaceId).then((res) => {
        if (res.result !== null) {
          this.spaceInfo = res.result[0]
          if (!this.spaceInfo.sysAttachments) {
            this.imageUrl1 = this.moren
          } else {
            this.imageUrl1 =
            process.env.VUE_APP_BASE_API +
            '/plm-sys' +
            this.spaceInfo.sysAttachments.fileOssUrl
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.userinfo {
  padding-bottom: 20px;
  .btn-start {
    width: 64px;
    height: 30px;
    font-size: 13px;
    .iconfont {
      font-size: 12px;
    }
  }
  &-avatar {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    margin-right: 15px;
  }
  &-title {
    font-weight: bold;
    padding-bottom: 11.5px;
    margin-top: 20px;
  }
  &-body{
    height: 38px;
    overflow: hidden;
  }
  .status {
    border-radius: 100px;
    background: #3ebe95;
    display: inline-block;
    width: 8px;
    height: 8px;
  }
  .text {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    line-height: 1.4;
    .line {
      margin: 0 16px 0 10px;
    }
    span {
      display: inline-block;
      margin-right: 6px;
    }
  }
}
</style>
